2023/12/231392字符

事件绑定

HTML

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<div class="demo" style="width: 200px; height: 200px; background: red;"></div>
<a href="https://www.baidu.com/">baidu</a>

JS

$('.list').on('click', 'li', {name: 'bozai'}, function (e) {  // on() 事件绑定
    console.log(e.target, e.data);
});
$('.demo').on({  // 绑定多个事件
    click: function () {
        console.log('click');
    },
    mouseenter: function () {
        console.log('mouseenter');
    },
    mouseleave: function () {
        console.log('mouseleave');
    },
});

$('a').one('click', function () {  // one() 只触发一次（一次性广告功能）
    window.open('https://www.taobao.com');
    return false;  // 取消事件冒泡
});

$('.demo').off();  // off() 解绑事件
$('.demo').off('click', function () {});  // 解绑指定事件指定函数
$('.list').off('click', 'li');

$('.demo').on('custom', function (a, b, c, d) {
    console.log(a, b, c, d);
});
$('.demo').trigger('custom', [10, 20, 30, 40]);

$('.demo').hover(function () {  // hover()
    $('.demo').css({width: 300});
}, function () {
    $('.demo').css({width: 200});
});

第二个参数进一步筛选，也能起到防止事件委托的作用，第三个参数用来传送数据